<template>
	<view class="success-container">
		<!-- 成功图标 -->
		<view class="icon-container">
			<text class="success-icon">✅</text>
		</view>

		<!-- 成功文案 -->
		<view class="text-container">
			<text class="success-title">支付成功</text>
			<text class="countdown-text">页面将在 {{ countDown }} 秒后前往订单详情页</text>
		</view>

		<!-- 返回按钮 -->
		<view class="button-container">
			<button class="back-btn" @click="goHome">立即前往</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			countDown: 3,
			timer: null,
			orderId: null
		};
	},
	onLoad(e) {
		if (e.id) {
			this.orderId = e.id;
		}
	},
	mounted() {
		this.startCountdown();
	},
	onUnload() {
		this.clearTimer();
	},
	methods: {
		startCountdown() {
			this.timer = setInterval(() => {
				if (this.countDown > 0) {
					this.countDown--;
				} else {
					this.handleRedirect();
				}
			}, 1000);
		},
		clearTimer() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		handleRedirect() {
			this.clearTimer();
			uni.redirectTo({
				url: '/pages2/order/detail?id=' + this.orderId // 替换为你的首页路径
			});
		},
		goHome() {
			this.handleRedirect();
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/variables.scss';

.success-container {
	height: 100vh;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* 内容靠上显示 */
	align-items: center;
	padding-top: 80rpx; /* 顶部留出一定空间，避免贴顶 */
	padding-bottom: 40rpx;
}

.icon-container {
	margin-bottom: 40rpx;
}

.success-icon {
	font-size: 120rpx;
	color: #4caf50;
}

.text-container {
	text-align: center;
	margin-bottom: 60rpx;
}

.success-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.countdown-text {
	font-size: 28rpx;
	color: #666;
	display: block;
}

.button-container {
	width: 50%;
}

.back-btn {
	background-color: $btn-default-bg;
	color: #fff;
	border-radius: 50rpx;
	padding: 20rpx 0;
	font-size: 28rpx;
}
</style>
